<template>
  <div class="list-box">
    <div class="list-header">
      <h2>项目利益相关方脉络图</h2>
      <p>
        <el-button type="warning">新增</el-button>
        <el-button type="danger">删除</el-button>
      </p>
    </div>
    <el-table
      :data="list"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px">
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="55">
      </el-table-column>
      <el-table-column
        prop="unit"
        header-align="center"
        align="center"
        label="单位"
        width="180">
      </el-table-column>
      <el-table-column
        prop="weight"
        header-align="center"
        align="center"
        label="决策权重">
      </el-table-column>
      <el-table-column
        prop="companyName"
        header-align="center"
        align="center"
        label="名称">
      </el-table-column>
      <el-table-column
        prop="projectPerson"
        header-align="center"
        align="center"
        label="项目人员">
      </el-table-column>
      <el-table-column
        prop="department"
        header-align="center"
        align="center"
        label="部门">
      </el-table-column>
      <el-table-column
        prop="position"
        header-align="center"
        align="center"
        label="职位">
      </el-table-column>
      <el-table-column
        prop="role"
        header-align="center"
        align="center"
        label="角色">
      </el-table-column>
      <el-table-column
        prop="preference"
        header-align="center"
        align="center"
        label="偏好维度">
      </el-table-column>
      <el-table-column
        prop="stance"
        header-align="center"
        align="center"
        label="立场">
      </el-table-column>
      <el-table-column
        prop="opponentialStance"
        header-align="center"
        align="center"
        label="对竞对立场">
      </el-table-column>
      <el-table-column
        prop="remarks"
        header-align="center"
        align="center"
        label="备注">
      </el-table-column>
      <el-table-column
        label="操作"
        header-align="center"
        align="center"
        width="160
      ">
      <template slot-scope="scope">
        <el-link type="primary">编辑</el-link>
        <el-link type="primary">删除</el-link>
      </template>
    </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          unit: '业主单位',
          weight: '高',
          companyName: 'XX有限公司',
          projectPerson: 'XX',
          department: '总经理',
          position: '总经理',
          role: '关键决策人',
          preference: '品质、服务',
          stance: '支持',
          opponentialStance: '中立',
          layer: '销售副总经理；XX',
          remarks: ''
        },
        {
          unit: '业主单位',
          weight: '高',
          companyName: 'XX有限公司',
          projectPerson: 'XX',
          department: '总经理',
          position: '总经理',
          role: '关键决策人',
          preference: '品质、服务',
          stance: '支持',
          opponentialStance: '中立',
          layer: '销售副总经理；XX',
          remarks: ''
        },
        {
          unit: '业主单位',
          weight: '高',
          companyName: 'XX有限公司',
          projectPerson: 'XX',
          department: '总经理',
          position: '总经理',
          role: '关键决策人',
          preference: '品质、服务',
          stance: '支持',
          opponentialStance: '中立',
          layer: '销售副总经理；XX',
          remarks: ''
        },
        {
          unit: '业主单位',
          weight: '高',
          companyName: 'XX有限公司',
          projectPerson: 'XX',
          department: '总经理',
          position: '总经理',
          role: '关键决策人',
          preference: '品质、服务',
          stance: '支持',
          opponentialStance: '中立',
          layer: '销售副总经理；XX',
          remarks: ''
        },
        {
          unit: '业主单位',
          weight: '高',
          companyName: 'XX有限公司',
          projectPerson: 'XX',
          department: '总经理',
          position: '总经理',
          role: '关键决策人',
          preference: '品质、服务',
          stance: '支持',
          opponentialStance: '中立',
          layer: '销售副总经理；XX',
          remarks: ''
        },
        {
          unit: '业主单位',
          weight: '高',
          companyName: 'XX有限公司',
          projectPerson: 'XX',
          department: '采购部',
          position: '部长',
          role: '重要影响者',
          preference: '价格、账期',
          stance: '中立',
          opponentialStance: '中立',
          layer: '销售总监；XX',
          remarks: ''
        },
        {
          unit: '工程公司',
          weight: '中',
          companyName: 'XX建设有限公司',
          projectPerson: 'XX',
          department: '项目经理',
          position: '项目经理',
          role: '重要影响者',
          preference: '价格、账期',
          stance: '支持',
          opponentialStance: '中立',
          layer: '销售总监；XX',
          remarks: ''
        },
        {
          unit: '工程公司',
          weight: '中',
          companyName: 'XX建设有限公司',
          projectPerson: 'XX',
          department: '商务部',
          position: '部长',
          role: '/',
          preference: '价格、账期',
          stance: '中立',
          opponentialStance: '中立',
          layer: '销售总监；XX',
          remarks: ''
        },
        {
          unit: '管理公司',
          weight: '低',
          companyName: 'XX有限公司',
          projectPerson: 'XX',
          department: '商务部',
          position: '部长',
          role: '/',
          preference: '价格、账期',
          stance: '中立',
          opponentialStance: '中立',
          layer: '销售总监；XX',
          remarks: ''
        }
      ],
      // 需要合并的行信息
      mergeData: []
    }
  },
  mounted() {
    this.createMergeData()
  },
  methods: {
    createMergeData() {
      this.mergeData = new Array(this.list.length).fill(0)
      let tempIndex = 0
      let tempName = ''
      this.list.map((item, index) => {
        if (tempName !== item.unit) {
          tempName = item.unit
          tempIndex = index
          this.mergeData[index] = 1
        } else {
          this.mergeData[index] = 0
          this.mergeData[tempIndex]++
        }
      })
      console.log(this.mergeData)
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex < 4) {
        console.log(this.mergeData[rowIndex])
        if (this.mergeData[rowIndex] === 0) {
          return {
            rowspan: 0,
            colspan: 0
          }
        } else {
          return {
            rowspan: this.mergeData[rowIndex],
            colspan: 1
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.list-box {
  .list-header {
    margin-bottom: 15px;
    overflow: hidden;
    &>h2 {
      width: 50%;
      float: left;
    }

    &>p {
      width: 50%;
      float: left;
      text-align: right;
    }
  }
}
</style>
<style lang="scss">
.list-box {
  .el-button {
    padding: 8px 20px;
  }
  .el-button--warning, .el-button--warning:focus, .el-button--warning:hover {
    background: #ff8000;
    border-color: #ff8000;
  }

  .el-link--inner {
    padding: 0 10px;
  }

  .el-table .el-table__cell {
    padding: 2px 0;
  }

  .el-table thead {
    color: #000000;
  }

  .el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
    border-right: 1px solid #000000;
  }

  .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
    border-bottom: 1px solid #000000;
  }

  .el-table--border, .el-table--group {
    border: 2px solid #000000;
  }

  .el-table {
    color: #000000;
  }
}
</style>
